<template>
    <div class="h-full w-full p-4">
        <div class="h-full flex flex-col bg-white rounded-lg shadow-md">
            <!-- ... existing header ... -->
            <div class="p-4 border-b w-full">
                <el-form :inline="true">
                    <el-form-item label="订单状态">
                        <el-select v-model="orderState" placeholder="请选择订单状态" clearable style="width: 160px">
                            <el-option v-for="(label, value) in orderStateOptions" :key="value" :label="label"
                                :value="value">
                                <span :class="[getStatusClass(Number(value)), 'px-2 py-1 rounded text-xs']">
                                    {{ label }}
                                </span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单编号">
                        <el-input v-model="orderNumber" placeholder="请输入订单编号" clearable />
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex-1">
                <el-table :data="orderData" height="100%">
                    <el-table-column label="订单编号" prop="orderNumber" />
                    <el-table-column label="手机号" prop="alipayPhone" />
                    <el-table-column label="饰品数量" prop="number" />
                    <el-table-column label="订单金额" prop="orderTotalPrice">
                        <template #default="{ row }">
                            ¥{{ row.orderTotalPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" prop="orderState">
                        <template #default="{ row }">
                            <span :class="getStatusClass(row.orderState)">
                                {{ orderstate(row.orderState) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createTime" />
                    <el-table-column label="操作" width="300">
                        <template #default="{ row }">
                            <el-button v-if="row.orderState === 1" link type="primary"
                                @click="handleAuditPass(row)">审核通过</el-button>
                            <el-button v-if="row.orderState === 1" link type="danger"
                                @click="handleAuditReject(row)">审核不通过</el-button>
                            <!-- 添加检查库存按钮 - 在饰品已转移状态时显示 -->
                            <el-button v-if="row.orderState === 4" link type="warning"
                                @click="handleCheckInventory(row)">检查库存</el-button>
                            <!-- 添加检查还款按钮 - 在已发起还款状态时显示 -->
                            <el-button v-if="row.orderState === 6" link type="success"
                                @click="handleCheckRepayment(row)">检查还款</el-button>
                            <!-- 饰品到账后付款 -->
                            <el-button v-if="row.orderState === 4" link type="success"
                                @click="handlePayment(row)">付款</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="详细" width="300">
                        <template #default="{ row }">
                            <el-button type="primary" @click="viewInformation(row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 添加分页组件 -->
            <div class="flex justify-end pt-4 pb-4 border-t">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next" />
            </div>
        </div>
    </div>
</template>



<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useOrderTable } from './hooks/useOrderTable';
import { useOrderStatus } from './hooks/useOrderStatus';
import { useOrderActions } from './hooks/useOrderActions';
// 搜索相关的响应式数据
const orderState = ref('')
const orderNumber = ref('')
const dateRange = ref<[string, string] | null>(null)

// 使用组合式函数
const {
    orderData,
    currentPage,
    pageSize,
    total,
    getOrderListApi,
    handleSizeChange,
    handleCurrentChange
} = useOrderTable()

const {
    orderStateOptions,
    orderstate,
    getStatusClass
} = useOrderStatus()

const {
    handleAuditPass,
    handleAuditReject,
    handleCheckInventory,
    handleCheckRepayment,
    handlePayment,
    viewInformation
} = useOrderActions(() => getOrderListApi({
    orderState: orderState.value,
    orderNumber: orderNumber.value,
    startDatetime: dateRange.value?.[0] || '',
    endDatetime: dateRange.value?.[1] || ''
}))

// 搜索和重置处理
const handleSearch = () => {
    currentPage.value = 1
    getOrderListApi({
        orderState: orderState.value,
        orderNumber: orderNumber.value,
        startDatetime: dateRange.value?.[0] || '',
        endDatetime: dateRange.value?.[1] || ''
    })
}

const handleReset = () => {
    orderState.value = ''
    orderNumber.value = ''
    dateRange.value = null
    currentPage.value = 1
    getOrderListApi({
        orderState: '',
        orderNumber: '',
        startDatetime: '',
        endDatetime: ''
    })
}

// 初始化
onMounted(() => {
    handleSearch()
})
</script>